<template>
	<view>
		<view>
			<div class="top-bg">
			</div>

			<u-popup v-model="updateUserShow" mode="bottom" width="100%" height="95%" :closeable="true" border-radius="14">
				<h2 style="margin-top: 80rpx;margin-left: 20rpx;">账号设置</h2>
				<u-row gutter="16">
					<u-col span="2">
						<view class="u-avatar-wrap">
							<u-avatar :src="headImg" size="80" @click="upload()"></u-avatar>
						</view>
					</u-col>
					<u-col span="10">
						<view class="u-avatar-wrap">
							<h4>更改头像</h4>
						</view>
					</u-col>
				</u-row>

				<u-row gutter="16">
					更改昵称
					<u-col span="12">
						<u-input placeholder="昵称" v-model="nickName" type="text" :border="true" />
					</u-col>
				</u-row>
				<u-row gutter="16">
					更改手机号码
					<u-col span="12">
						<u-input placeholder="手机号码" v-model="phone" type="text" :border="true" />
					</u-col>
				</u-row>
				<u-row gutter="16">
					<u-col span="6">
					</u-col>
					<u-col span="5">
						<view class="demo-layout bg-purple-light">
							<u-button type="primary" :ripple="true" @click="updateUser()">
								确认修改
							</u-button>
						</view>
					</u-col>
				</u-row>

				<u-row gutter="16">
					请输入旧密码
					<u-col span="12">
						<u-input placeholder="密码" v-model="password" type="password" :border="true" />
					</u-col>
				</u-row>
				<u-row gutter="16">
					请输入新密码
					<u-col span="12">
						<u-input placeholder="密码" v-model="newPassword1" type="password" :border="true" />
					</u-col>
				</u-row>
				<u-row gutter="16">
					请确认新密码
					<u-col span="12">
						<u-input placeholder="密码" v-model="newPassword2" type="password" :border="true" />
					</u-col>
				</u-row>
				<u-row gutter="16">
					<u-col span="6">
					</u-col>
					<u-col span="5">
						<view class="demo-layout bg-purple-light">
							<u-button type="primary" :ripple="true" @click="updatePassword()">
								确认修改
							</u-button>
						</view>
					</u-col>
				</u-row>
			</u-popup>
			
			<div style="margin: 20rpx;background-color: #FFFFFF;">
				<u-grid :col="1">
					<u-grid-item>
						<u-avatar :src="headImg" size="128"></u-avatar>
						<h2>{{nickName}}</h2>
						<p style="color: #909399;">{{phone}}</p>
					</u-grid-item>
				</u-grid>
			</div>

			<u-cell-group>
				<u-cell-item icon="setting" title="账号设置" @click="update()"></u-cell-item>
				<u-cell-item icon="close-circle" title="退出登录" @click="returnLogin()"></u-cell-item>
			</u-cell-group>
			
			<div class="bottom-font">
				<p>Be云</p>
				<u-divider bg-color="rgb(240, 240, 240)">基于HDFS存储</u-divider>
			</div>

		</view>
		<u-tabbar v-model="current" :list="downList" :mid-button="false" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script src="./user.js">

</script>

<style src="./user.css">

</style>
